<template>
  <div class="personal">
    <div class="block">
      <el-avatar
        :size="50"
        :src="
          $userInfoStore.userinfo.img
            ? '/api/' + $userInfoStore.userinfo.img
            : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        "
      />
    </div>
    <p>{{ $userInfoStore.userinfo.username }}</p>
    <p>{{ $userInfoStore.userinfo.typename }}</p>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'
import type { FormInstance, FormRules, UploadInstance } from 'element-plus'
import { useuserInfoStore } from '../stores/counter'

let $userInfoStore = useuserInfoStore()

// const state = reactive({
//   circleUrl: $userInfoStore.userinfo.img?'/api/' + $userInfoStore.userinfo.img:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
// })

// const { circleUrl } = toRefs(state)
</script>

<style scoped lang="scss">
.personal {
  height: 26%;
  text-align: center;
  padding: 30px 0;
  color: #fff;
}
.el-avatar--circle {
  --el-avatar-size: 70px !important;
}
</style>
